<template>
  <div class="assessSelfMobel">
    <div class="assessSelfItem" v-for="(item, index) in abilityDatas" :key="index">
      <h2 :class="{isChecked: currentIndex === index}" @click="checkOneBox(index)">{{ item.textName }}</h2>
      <div class="detailItem" v-for="(it, ind) in item.child" :key="ind" :class="{isShow: currentIndex !== index}">
        <span>
          {{ it.name }}
        </span>
        <span>
          <el-rate v-model="it.score"></el-rate>
        </span>
      </div>
    </div>
    <div>
      <el-button style="margin:20px; float:right" type="primary" @click="saveScore">保存</el-button>
    </div>
  </div>
</template>

<script>
import abilityText from "../../../utils/abilityText.json";
export default {
  data() {
    return {
      value: 1,
      abilityDatas: [],
      currentIndex: 0,
    };
  },
  methods: {
    initAbilityData() {
      const detailData = abilityText.text
      this.abilityDatas = detailData
    },
    checkOneBox(index) {
      this.currentIndex = index
    },
    // 保存评分信息
    saveScore(){
      const query = this.$router.history.current.query
      console.log(query)
      console.log(this.abilityDatas)
    }
  },
  created() {
    this.initAbilityData();
  },
};
</script>

<style scoped>
.assessSelfMobel {
  width: 96%;
  margin: 10px auto;
}
.assessSelfItem h2 {
  background: #c0cbd9;
  height: 55px;
  line-height: 55px;
  padding-left: 20px;
  border-radius: 5px;
}
.detailItem {
  display: flex;
  height: 50px;
  border-bottom: 1px solid #eee;
}
.detailItem > :nth-child(n) {
  line-height: 50px;
}
.detailItem > :nth-child(1) {
  text-align: left;
  padding-left: 20px;
  flex: 3;
  overflow:hidden
}
.detailItem > :nth-child(2) {
  text-align: right;
  flex: 2;
}
.el-rate {
  line-height: 50px;
}
.isChecked {
  color: #f0ab00;
}
.isShow {
  display:none;
}
</style>
